Next.js Edge Config: Distribución Global de Configuración Simplificada

En el vertiginoso panorama actual del desarrollo web, es crucial ofrecer experiencias personalizadas y dinámicas a los usuarios de todo el mundo. Next.js, un popular framework de React, ofrece una solución sólida para construir aplicaciones web escalables y de alto rendimiento. Una de sus características clave es Edge Config, una potente herramienta para gestionar y distribuir configuraciones globalmente en el borde. Esta publicación de blog proporciona una guía completa para comprender y utilizar Next.js Edge Config para optimizar el rendimiento de tu aplicación y ofrecer experiencias personalizadas a tu audiencia global.

¿Qué es Next.js Edge Config?

Next.js Edge Config es un almacén de clave-valor de baja latencia y distribuido globalmente, diseñado específicamente para servir datos de configuración a las Edge Functions de Next.js. A diferencia de las bases de datos o API tradicionales, Edge Config está optimizado para la velocidad y la eficiencia, permitiéndote acceder a los datos de configuración en milisegundos desde cualquier parte del mundo. Esto te permite ajustar dinámicamente el comportamiento de tu aplicación basándote en los valores de configuración, sin sacrificar el rendimiento.

Piénsalo como un archivo JSON replicado globalmente que puedes consultar increíblemente rápido desde las Edge Functions. Esto lo hace ideal para:

• Pruebas A/B: Sirve dinámicamente diferentes versiones de tu aplicación a diferentes segmentos de usuarios.
• Feature Flags (Indicadores de Funcionalidad): Activa o desactiva funcionalidades basándote en los valores de configuración.
• Personalización: Adapta el contenido y las experiencias según las preferencias o la ubicación del usuario.
• Enrutamiento Geográfico: Dirige a los usuarios a diferentes recursos según su ubicación.
• Limitación de Tasa (Rate Limiting): Implementa la limitación de tasa basándote en los valores de configuración.
• Internacionalización (i18n): Sirve diferente contenido según la configuración regional del usuario, aunque Next.js también tiene soporte integrado para i18n. Edge Config puede manejar escenarios complejos de enrutamiento por localización.

¿Por qué usar Edge Config?

Estos son los beneficios clave de usar Next.js Edge Config:

• Distribución Global: Los datos se replican en la red de borde global de Vercel, asegurando un acceso de baja latencia desde cualquier parte del mundo.
• Baja Latencia: Optimizado para la velocidad, permitiendo acceder a los datos de configuración en milisegundos.
• Actualizaciones Atómicas: Las actualizaciones son atómicas, asegurando la consistencia de los datos. Nunca tendrás una situación en la que algunos bordes tengan los datos antiguos y otros los nuevos durante un despliegue.
• Gestión de Configuración Simplificada: Proporciona una ubicación central para gestionar la configuración de tu aplicación.
• Integración Perfecta con Next.js: Diseñado para funcionar sin problemas con las Edge Functions de Next.js.
• Rendimiento Mejorado: Reduce la necesidad de obtener datos de bases de datos o API, mejorando el rendimiento de la aplicación.
• Costos de Infraestructura Reducidos: Puede ayudar a reducir los costos de infraestructura al eliminar la necesidad de bases de datos o API adicionales para los datos de configuración.
• Seguridad Mejorada: Almacena y gestiona de forma segura los datos de configuración de tu aplicación.

Cómo Empezar con Edge Config

Aquí tienes una guía paso a paso para empezar con Next.js Edge Config:

1. Configuración del Proyecto

Asegúrate de tener un proyecto de Next.js. Si no es así, crea uno usando:

            npx create-next-app@latest my-app
cd my-app
            

              
                Copy
              
            
          

2. Crear un Edge Config

Necesitarás una cuenta de Vercel para usar Edge Config. Una vez que hayas iniciado sesión, navega a tu proyecto de Vercel y crea un nuevo Edge Config. Dale un nombre descriptivo.

3. Instalar el SDK de Edge Config

Instala el SDK @vercel/edge-config en tu proyecto de Next.js:

            npm install @vercel/edge-config
# o
yarn add @vercel/edge-config
# o
pnpm install @vercel/edge-config
            

              
                Copy
              
            
          

4. Configurar Variables de Entorno

Necesitarás configurar la variable de entorno EDGE_CONFIG. Puedes encontrar el valor de esta variable en el panel de control de Vercel para tu Edge Config. Añádelo a tu archivo .env.local (o a la configuración de tu proyecto en Vercel para producción):

            EDGE_CONFIG=your_edge_config_url
            

              
                Copy
              
            
          

Importante: Nunca subas tu archivo .env.local a tu repositorio. Utiliza la configuración de variables de entorno de Vercel para los entornos de producción.

5. Acceder a los Valores de Configuración en tu Código

Ahora puedes acceder a los valores de tu Edge Config en tu código de Next.js. Aquí tienes un ejemplo:

            // pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>¡La funcionalidad está activada!</p> : <p>La funcionalidad está desactivada.</p>}
    </div>
  );
}

            

              
                Copy
              
            
          

En este ejemplo, estamos obteniendo los valores de featureFlag y welcomeMessage del Edge Config en getServerSideProps. Estos valores se pasan luego como props al componente Home.

6. Actualizar los Valores de Configuración

Puedes actualizar los valores en tu Edge Config a través del panel de control de Vercel. Los cambios se propagan globalmente en milisegundos.

Casos de Uso Avanzados y Ejemplos

Pruebas A/B con Edge Config

Edge Config es perfecto para las pruebas A/B. Puedes definir un valor de configuración que determine qué versión de tu aplicación servir a un usuario. Por ejemplo:

1. Crea un Edge Config con una clave llamada abTestGroup.
2. Establece el valor como A o B.
3. En tu Edge Function, lee el valor de abTestGroup.
4. Basándote en el valor, sirve la versión A o la versión B de tu contenido.

Aquí tienes un ejemplo:

            // pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = '¡Esta es la versión A!';
  } else {
    content = '¡Esta es la versión B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>Prueba A/B</h1>
      <p>{content}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Puedes usar herramientas de análisis para rastrear el rendimiento de cada versión y determinar cuál funciona mejor. Considera herramientas como Google Analytics, Amplitude o Mixpanel para una recopilación y análisis exhaustivo de datos de pruebas A/B.

Feature Flags (Indicadores de Funcionalidad) con Edge Config

Los feature flags te permiten activar o desactivar funcionalidades sin desplegar nuevo código. Esto es útil para probar nuevas funcionalidades en producción o para lanzarlas gradualmente a un subconjunto de usuarios. De forma similar a las pruebas A/B, puedes controlar la disponibilidad de una funcionalidad con un simple indicador booleano en tu Edge Config.

1. Crea un Edge Config con una clave llamada newFeatureEnabled.
2. Establece el valor como true o false.
3. En tu Edge Function, lee el valor de newFeatureEnabled.
4. Basándote en el valor, activa o desactiva la nueva funcionalidad.

            // components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>¡La nueva funcionalidad está activada!</p> : <p>La nueva funcionalidad está desactivada.</p>}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Personalización con Edge Config

Puedes usar Edge Config para personalizar el contenido y las experiencias según las preferencias o la ubicación del usuario. Por ejemplo, puedes almacenar las preferencias del usuario en una base de datos y luego usar Edge Config para servir contenido diferente según esas preferencias.

Escenario de Ejemplo: Un sitio de comercio electrónico global quiere mostrar recomendaciones de productos basadas en el país del usuario. Podrían usar un Edge Config para mapear países a categorías de recomendación.

1. Crea un Edge Config con una clave llamada countryToCategoryMap.
2. Establece el valor como un objeto JSON que mapea países a categorías de productos (ej., {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
3. En tu Edge Function, lee el valor de countryToCategoryMap.
4. Determina el país del usuario (ej., a partir de su dirección IP o una cookie).
5. Usa el countryToCategoryMap para determinar la categoría de producto apropiada.
6. Muestra recomendaciones de productos de esa categoría.

            // pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Por defecto, US
  const category = countryToCategoryMap[country] || 'General'; // Por defecto, General

  // Obtener recomendaciones de productos basadas en la categoría
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Recomendaciones de Productos</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Reemplaza con tu lógica real de obtención de productos
  return [
    { id: 1, name: `Producto 1 (${category})` },
    { id: 2, name: `Producto 2 (${category})` },
  ];
}

            

              
                Copy
              
            
          

Este ejemplo utiliza el encabezado x-vercel-ip-country para determinar el país del usuario. Este encabezado es añadido automáticamente por Vercel. Es importante tener en cuenta que depender únicamente de la geolocalización basada en IP puede no ser siempre preciso. Considera usar otros métodos como la ubicación proporcionada por el usuario o servicios de geolocalización más sofisticados para mejorar la precisión.

Enrutamiento Geográfico con Edge Config

Puedes dirigir a los usuarios a diferentes recursos según su ubicación usando Edge Config. Esto es útil para servir contenido localizado o para cumplir con regulaciones regionales.

1. Crea un Edge Config con una clave llamada countryToRedirectMap.
2. Establece el valor como un objeto JSON que mapea países a URL (ej., {"CN": "/china", "DE": "/germany"}).
3. En tu Edge Function, lee el valor de countryToRedirectMap.
4. Determina el país del usuario (ej., a partir de su dirección IP).
5. Redirige al usuario a la URL apropiada.

            // pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Por defecto, US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

            

              
                Copy
              
            
          

Este ejemplo usa la propiedad req.geo.country, que es poblada automáticamente por la Red de Borde de Vercel con el código de país del usuario. Este es un enfoque más limpio y fiable que analizar directamente el encabezado x-vercel-ip-country. La función de middleware comprueba si hay una URL de redirección definida para el país del usuario en el Edge Config. Si es así, redirige al usuario a esa URL. De lo contrario, continúa procesando la solicitud.

Limitación de Tasa (Rate Limiting) con Edge Config

Aunque Edge Config no está diseñado para ser una solución completa de limitación de tasa, puedes usarlo junto con otras técnicas para implementar una limitación de tasa básica. La idea es almacenar parámetros de limitación de tasa (ej., solicitudes por minuto) en Edge Config y luego usar esos parámetros en tus Edge Functions para aplicar los límites.

Nota Importante: Este enfoque es adecuado para escenarios de limitación de tasa simples. Para una limitación más robusta, considera usar servicios o middleware dedicados a la limitación de tasa.

1. Crea un Edge Config con claves como requestsPerMinute y blockedIps.
2. Establece el valor de requestsPerMinute al límite de tasa deseado.
3. Establece el valor de blockedIps como un array de direcciones IP que deberían ser bloqueadas.
4. En tu Edge Function, lee los valores de requestsPerMinute y blockedIps.
5. Comprueba si la dirección IP del usuario está en el array blockedIps. Si es así, bloquea la solicitud.
6. Usa un mecanismo de caché (ej., Redis o Vercel's Edge Cache) para rastrear el número de solicitudes de cada dirección IP en el último minuto.
7. Si el número de solicitudes de la dirección IP del usuario excede el límite de requestsPerMinute, bloquea la solicitud.

Ejemplo (Ilustrativo - Requiere Implementación Adicional para el Caché):

            // pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Obtener la IP del usuario

  // Comprobar si la IP está bloqueada
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Demasiadas Solicitudes');
  }

  // TODO: Implementar el conteo de solicitudes y el caché (ej., usando Redis o Vercel Edge Cache)
  // Ejemplo (Conceptual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Demasiadas Solicitudes');
  // }
  // await incrementRequestCount(ip);

  // Lógica de tu ruta protegida aquí
  res.status(200).send('¡Acceso exitoso a la ruta protegida!');
}

            

              
                Copy
              
            
          

Consideraciones Importantes para la Limitación de Tasa:

• Caché: Necesitarás usar un mecanismo de caché para rastrear los conteos de solicitudes. Vercel's Edge Cache o una instancia de Redis son buenas opciones.
• Dirección IP: El encabezado x-real-ip o req.connection.remoteAddress se usan comúnmente para obtener la dirección IP del usuario. Ten en cuenta que estos pueden ser falsificados en algunos casos. Para entornos de producción, considera usar técnicas de detección de direcciones IP más robustas.
• Concurrencia: Ten cuidado con los problemas de concurrencia al incrementar los contadores de solicitudes. Usa operaciones atómicas para asegurar la precisión.
• Complejidad: Implementar una solución de limitación de tasa robusta puede ser complejo. Considera usar servicios de limitación de tasa dedicados para funcionalidades más avanzadas y protección contra ataques sofisticados.

Mejores Prácticas para Usar Edge Config

• Mantén tu Edge Config pequeño: Edge Config está optimizado para pequeñas cantidades de datos. Evita almacenar grandes conjuntos de datos en tu Edge Config.
• Usa nombres de clave descriptivos: Usa nombres de clave claros y descriptivos para que tu configuración sea más fácil de entender y mantener.
• Usa variables de entorno para datos sensibles: Almacena datos sensibles, como claves de API, en variables de entorno en lugar de directamente en tu Edge Config.
• Prueba tus cambios a fondo: Prueba tus cambios en un entorno de preproducción (staging) antes de desplegar a producción.
• Monitoriza tu Edge Config: Monitoriza tu Edge Config para asegurarte de que funciona como se espera e identificar cualquier problema potencial. Vercel proporciona herramientas de monitorización que puedes usar para rastrear el rendimiento de tu Edge Config.
• Control de Versiones: Aunque los datos de configuración en sí no se versionan directamente de la misma manera que el código, es una buena práctica documentar los cambios realizados en el Edge Config y vincularlos a despliegues de código específicos. Esto ayuda a rastrear y comprender la evolución de tu configuración.
• Consideraciones de Seguridad: Trata los datos de tu Edge Config como valiosos y potencialmente sensibles. Sigue las mejores prácticas de seguridad para gestionar secretos y control de acceso.

Alternativas a Edge Config

Aunque Edge Config es una herramienta potente, no siempre es la mejor solución para todos los casos de uso. Aquí hay algunas alternativas a considerar:

• Variables de Entorno: Para valores de configuración simples que no necesitan actualizarse con frecuencia, las variables de entorno pueden ser suficientes.
• Bases de Datos Tradicionales: Para conjuntos de datos más grandes o requisitos de configuración más complejos, una base de datos tradicional (ej., PostgreSQL, MongoDB) puede ser una mejor opción.
• Sistemas de Gestión de Contenidos (CMS): Para gestionar configuraciones relacionadas con el contenido, un CMS puede ser una buena opción.
• Plataformas de Gestión de Funcionalidades: Las plataformas dedicadas a la gestión de funcionalidades (ej., LaunchDarkly, Split) ofrecen capacidades más avanzadas de feature flagging y pruebas A/B.
• Bases de Datos sin Servidor (Serverless): Bases de datos como FaunaDB o PlanetScale están diseñadas para entornos sin servidor y pueden ofrecer un buen equilibrio entre rendimiento y escalabilidad para los datos de configuración.

Conclusión

Next.js Edge Config es una potente herramienta para gestionar y distribuir configuraciones globalmente en el borde. Al aprovechar Edge Config, puedes optimizar el rendimiento de tu aplicación, ofrecer experiencias personalizadas y simplificar tu flujo de trabajo de gestión de configuración. Ya sea que estés construyendo un sitio de comercio electrónico global, una plataforma de redes sociales o cualquier otro tipo de aplicación web, Edge Config puede ayudarte a ofrecer una experiencia rápida y atractiva a tus usuarios en todo el mundo. ¡Explora las posibilidades e integra Edge Config en tus proyectos de Next.js hoy mismo para desbloquear todo su potencial!